import { Checkbox, Col, InputNumber, Row, Tooltip } from 'antd';
import React from 'react';
import styles from '../styles.less';

function Length({ value, onChange }) {
  const { gt, lt, gte, lte } = value;
  
  return (
    <Row style={{ width: '100%' }}>
      <Col span={12} style={{ display: 'flex', alignItems: 'center' }}>
        <div className={styles.label}>最小长度</div>
        <div className={styles.item}>
          <InputNumber
            className="margin-right"
            value={gt || gte}
            onChange={v => {
              if (v === '' || v === null) {
                onChange({ ...value, gte: undefined, gt: undefined });
              } else if (typeof gte === 'number') {
                onChange({ ...value, gte: v, gt: undefined });
              } else {
                onChange({ ...value, gt: v, gte: undefined });
              }
            }}
            min={0}
            precision={0}
            placeholder="请输入"
          />
          <Tooltip title="包含最小值">
            <Checkbox
              disabled={gte === undefined && gt === undefined}
              checked={typeof gte === 'number'}
              onChange={e => {
                if (e.target.checked) {
                  onChange({ ...value, gte: gt, gt: undefined });
                } else {
                  onChange({ ...value, gt: gte, gte: undefined });
                }
              }}
            />
          </Tooltip>
        </div>
      </Col>
      <Col span={12} style={{ display: 'flex', alignItems: 'center' }}>
        <div className={styles.label}>最大长度</div>
        <div className={styles.item}>
          <InputNumber
            className="margin-right"
            value={lt || lte}
            min={0}
            onChange={v => {
              if (v === '' || v === null) {
                onChange({ ...value, lte: undefined, lt: undefined });
              } else if (typeof lte === 'number') {
                onChange({ ...value, lte: v, lt: undefined });
              } else {
                onChange({ ...value, lt: v, lte: undefined });
              }
            }}
            precision={0}
            placeholder="请输入"
          />
          <Tooltip title="包含最大值">
            <Checkbox
              disabled={lte === undefined && lt === undefined}
              checked={typeof lte === 'number'}
              onChange={e => {
                if (e.target.checked) {
                  onChange({ ...value, lte: lt, lt: undefined });
                } else {
                  onChange({ ...value, lt: lte, lte: undefined });
                }
              }}
            />
          </Tooltip>
        </div>
      </Col>
    </Row>
  );
}

export default Length;
